<!-- 首页分类页 -->
<template>
  <div class="categoryList-main">
    <Navbar :title="title" />
    <van-tabs v-model="nowIndex" @click="getGoodsList">
      <van-tab
        v-for="(item, index) in homecategoryNav"
        :key="index"
        :title="item.id"
      >
        <template #title>{{ item.name }}</template>
        <!-- 产品列表展示 -->
        <div class="goodsListBox">
          <div class="goodsListTitle">
            <div class="goodsListTitleName">{{ homeGoodsTitle.name }}</div>
            <div class="goodsListTitledes">{{ homeGoodsTitle.front_desc }}</div>
          </div>
          <div class="goodListShow" v-if="homegoodsList.length!=0">
            <div
              class="goodListShowItem"
              v-for="(item, index) in homegoodsList"
              :key="index"
              @click="goGoods(item.id)"
            >
              <img :src="item.list_pic_url" class="goodListShowItemImg" alt />
              <div class="goodListShowItemName">{{ item.name }}</div>
              <div class="goodListShowItemPrice">¥{{ item.retail_price }}</div>
            </div>
          </div>
          <div v-else class="none">
               数据库暂无数据
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
//重点:1.将tab标签的id与下面列表展示的联动起来,实现切换
import Vue from "vue";
import Navbar from "@/components/Navbar";
import homeApi from "@/api/home/index";
import { Tab, Tabs } from "vant";

Vue.use(Tab).use(Tabs);
export default {
  name: "categoryList",
  components: {
    Navbar,
  },
  data() {
    return {
      title: "商品展示",
      id: "",
      nowIndex: 0,
      currentNav:{},
      homecategoryNav: [],
      homeGoodsTitle: [],
      homegoodsList: [],
    };
  },
  created() {
   this.id = this.$route.params.id;
    this.getHomecategoryNav();

  },
  methods: {
    //Tab标签页展示
    async getHomecategoryNav() {
      await homeApi.homecategoryNav({
          id: this.id,
        })
        .then((res) => {
          res.navData.forEach((ele) => (ele.id = JSON.stringify(ele.id)));
          this.homecategoryNav = res.navData;
          this.currentNav = res.currentNav;
          for(let i=0;i<this.homecategoryNav.length;i++){
            const id=this.homecategoryNav[i].id
            if(this.currentNav.id==id){
              this.nowIndex=i
            }
          }
        });
    },

    //列表页展示
    async getGoodsList(index, id) {
      console.log(index, id);
      this.nowIndex = index;
      await homeApi.homegoodsList({
          categoryId: id,
        })
        .then((res) => {
          this.homeGoodsTitle = res.currentNav;
          this.homegoodsList = res.data;
        });
    },
    
    // 商品详情页
    goGoods(id){
      this.$router.push({name:'goods',params:{id}})
    }
  },
};
</script>
<style lang='scss' scoped>
.categoryList-main {
  .van-tabs {
    .goodsListBox {
      margin-top: 10px;
      .goodsListTitle {
        background-color: $bagColor;
        height: 100px;
        text-align: center;
        .goodsListTitleName {
          padding-top: 30px;
          font-size: 14px;
        }
        .goodsListTitledes {
          color: #a7a7a7;
          padding-top: 10px;
        }
      }
      .goodListShow {
        margin: 5px 3px 0;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .goodListShowItem {
          width: 49.5%;
          height: 240px;
          margin-bottom: 3px;
          background-color: $bagColor;
          text-align: center;
          .goodListShowItemImg {
            width: 150px;
            height: 150px;
            padding-left: 18px;
          }
          .goodListShowItemPrice {
            font-size: 15px;
            color: $baseColor;
            padding-top: 12px;
          }
        }
      }
      .none{
        text-align: center;
        margin-top: 50px;
        color: #999;
      }
    }
  }
}
</style>